<html>
<head>
   <%include meta.ejs%>
</head>

<body>

<%include header.ejs%>

<div data-page="moklr" class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>Http Request Builder</h4>
        </div>
        <div class="panel-body">
            <div class="row">

                <div class="col-sm-6">
                    <form name="method">
                        <h4>Method</h4>
                        <div class="form-group">
                            <div class="input-group multi">
                                <select name="method" class="form-control" style="width:200px;">
                                    <option value="GET" selected>GET</option>
                                    <option value="POST">POST</option>
                                </select>
                            </div>
                        </div>
                    </form>

                    <form name="url">
                        <h4>URL</h4>
                        <div class="form-group">
                            <div class="multi">
                                <input name="url" value="http://baidu.com" placeholder="http://sumory.com/" required="true" class="form-control" style="width:100%;">
                            </div>
                        </div>
                    </form>

                    <form name="queryString" class="form-inline">
                        <h4>QueryString</h4>
                        <div class="form-group pair">
                            <div class="input-group multi">
                                <span class="input-group-addon">Query &nbsp;</span>
                                <input type="text" name="name" placeholder="name" required="" class="form-control">
                                <input type="text" name="value" placeholder="value" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" tabindex="-1" class="btn btn-success">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </button>
                                    <button type="button" tabindex="-1" class="btn btn-danger">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>

                    <form name="postData-params" class="form-inline">
                        <h4>PostData</h4>
                        <div class="form-group">
                            <select name="postData-mimeType" class="form-control" style="width:200px;">
                                <option value="application/x-www-form-urlencoded">x-www-form-urlencoded</option>
                                <option value="multipart/form-data">multipart/form-data</option>
                                <option value="application/json">application/json</option>
                            </select>
                        </div>
                        <div class="form-group" id="postData-text" style="width:100%; display:none;">
                            <textarea class="form-control" rows="5" style="width:100%;"></textarea>
                            <span>必须为严格的json格式，key需用双引号包裹</span>
                        </div>
                        <div class="form-group pair" id="postData-params" style="display:block;">
                            <div class="input-group multi">
                                <span class="input-group-addon">Param</span>
                                <input type="text" name="name" placeholder="name" required="" class="form-control">
                                <input type="text" name="value" placeholder="value" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" tabindex="-1" class="btn btn-success">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </button>
                                    <button type="button" tabindex="-1" class="btn btn-danger">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </span>
                            </div>
                        </div>

                    </form>


                    <form name="headers" class="form-inline">
                        <h4>Headers</h4>
                        <div class="form-group pair">
                            <div class="input-group multi">
                                <span class="input-group-addon">Header</span>
                                <input type="text" name="name" value="Accept" placeholder="name" required="" class="form-control">
                                <input type="text" name="value" value="*/*" placeholder="value" class="form-control">
                                    <span class="input-group-btn">
                                        <button type="button" tabindex="-1" class="btn btn-success">
                                            <i class="glyphicon glyphicon-plus"></i>
                                        </button>
                                        <button type="button" tabindex="-1" class="btn btn-danger">
                                            <i class="glyphicon glyphicon-remove"></i>
                                        </button>
                                    </span>
                            </div>
                        </div>

                        <div class="form-group pair">
                            <div class="input-group multi">
                                <span class="input-group-addon">Header</span>
                                <input type="text" name="name" placeholder="name" required="" class="form-control">
                                <input type="text" name="value" placeholder="value" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" tabindex="-1" class="btn btn-success">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </button>
                                    <button type="button" tabindex="-1" class="btn btn-danger">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>


                    <form name="cookies" class="form-inline">
                        <h4>Cookies</h4>
                        <div class="form-group pair">
                            <div class="input-group multi">
                                <span class="input-group-addon">Cookie</span>
                                <input type="text" name="name" placeholder="name" required="" class="form-control">
                                <input type="text" name="value" placeholder="value" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" tabindex="-1" class="btn btn-success">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </button>
                                    <button type="button" tabindex="-1" class="btn btn-danger">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>



                </div>
                <div class="col-sm-6">
                    <h4>Preview</h4>
                    <div id="preview"><pre><code class="hljs json"></code></pre>
                    </div>
                </div>
            </div>

        </div>
        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-3">
                    <a id="createBtn"  class="btn btn-primary btn-block" href="javascript:void(0);">Generate Code</a>
                </div>
                <div class="col-sm-3">
                    <a id="downloadCodeBtn" class="btn btn-primary btn-block" href="javascript:void(0);">Download Code</a>
                </div>

                <div class="col-sm-3">
                    <a id="runCodeBtn"  class="btn btn-primary btn-block" href="javascript:void(0);">Run Test</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="codeArea" class="container">
    <p>
        <div class="dropdown" style="display: inline-block">
            <button class="btn btn-default dropdown-toggle" type="button" id="lDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Language
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="lDropdownList">
            </ul>
        </div>
        <span id="selectedLanguage"></span>
    </p>

    <div id="preview_code"><pre><code></code></pre></div>
</div>

<div id="execArea" class="container">
    <pre><code></code></pre>
</div>

<%include footer.ejs%>


<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/create.js"></script>

<script>
    $(document).ready(function() {
        Moklr.Common.init();
        Moklr.Common.processFormData();
    });

</script>

</body>
</html>